
<script setup>
import {ref} from "vue";
import {VueUiSparkbar} from "vue-data-ui";
import "vue-data-ui/style.css"

const config = ref({
  "theme": "",
  "customPalette": [],
  "style": {
    "fontFamily": "inherit",
    "backgroundColor": "#FFFFFF00",
    "animation": {
      "show": true,
      "animationFrames": 60
    },
    "layout": {
      "independant": true,
      "percentage": false,
      "target": 100,
      "showTargetValue": false,
      "targetValueText": ""
    },
    "gutter": {
      "backgroundColor": "#e1e5e8ff",
      "opacity": 100
    },
    "bar": {
      "gradient": {
        "show": true,
        "intensity": 40,
        "underlayerColor": "#FFFFFF"
      }
    },
    "labels": {
      "fontSize": 16,
      "name": {
        "position": "top-left",
        "width": "100%",
        "color": "#1A1A1Aff",
        "bold": true
      },
      "value": {
        "show": true,
        "bold": true
      }
    },
    "title": {
      "text": "",
      "color": "#1A1A1Aff",
      "fontSize": 20,
      "bold": true,
      "textAlign": "left",
      "margin": "0 0 6px 0",
      "subtitle": {
        "color": "#CCCCCCff",
        "text": "",
        "fontSize": 16,
        "bold": false
      }
    },
    "gap": 4
  }
});


const dataset = ref([
  {
    "name": "土壤含水率",
    "value": 50,
    "color": "#6376DD",
    "prefix": "",
    "suffix": "%",
    "rounding": 2
  }
]);

</script>

<template>
  <div style="width:16vw">
    <VueUiSparkbar :config="config" :dataset="dataset"/>
  </div>
</template>

